<template>
  <div class="project-drop-down" v-if="drawerVisible">
    <div class="search">
      <el-input v-model="searchKey" style="width: 240px" placeholder="搜索" :prefix-icon="Search" @input="searchFn" clearable />
    </div>
    <el-scrollbar ref="scrollbarRef">
      <ul class="tab-1">
        <li
          v-for="(item, index) in viewUserList"
          :key="index"
          @click="activeFn(item)"
          :class="`${item.isActive ? 'active' : ''}`"
        >
          <div class="name">
            <span class="img" v-if="item.avatarUrl">
              <img :src="urlResource + item.avatarUrl" alt="" />
            </span>
            <span class="name-content">{{ item.name }}</span>
          </div>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, defineEmits, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
// defineEmits
const emits = defineEmits(["update:drawerVisible", "change"]);
// props
const props = defineProps({
  drawerVisible: { type: Boolean, default: false },
  config: {
    type: Object,
    default: () => {
      return {
        other: {
          options: []
        }
      };
    }
  }
});
// 变量
const searchKey = ref();
const urlResource = window?.staticConfig.urlResource;
const viewUserList = ref<any>([]);
let params = ref({});

//watch
watch(
  () => props.config.other.options,
  val => {
    viewUserList.value = val;
  },
  {
    immediate: true
  }
);
watch(
  () => props.config.data,
  val => {
    params.value = val;
  },
  {
    immediate: true
  }
);
// 方法
const searchFn = () => {
  viewUserList.value = props.config.other.options.filter(item => {
    return item.name.toLowerCase().includes(searchKey.value);
  });
};
const activeFn = async item => {
  try {
    params.value[props.config.key] = item.id;
    if (props.config.api) await props.config.api(params.value);
    if (props.config.successCallback) {
      props.config.successCallback(params);
    }
    emits("update:drawerVisible", false);
    emits("change", item.id);
  } catch (e) {
    console.log(e);
    if (props.config.failCallback) {
      props.config.failCallback(params);
    }
  }
};

onUnmounted(() => {});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.project-drop-down {
  // position: absolute;
  // top: calc(100% + 10px);
  // left: -10px;
  // z-index: 10001;
  height: 100%;
  padding: 10px 0 30px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);

  // transition: all 0.3s;
  ul,
  li {
    padding: 0;
    margin: 0;
  }
  .search {
    padding: 0 10px;
  }
  .tab-1 {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;

    // height: 100%;
    margin-top: 10px;
    li {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 56px;
      cursor: pointer;
      border-bottom: 1px solid #f4f4f4;
      border-left: 2px solid transparent;
      .name {
        display: flex;
        align-items: center;
        margin-left: 30px;
        .img {
          width: 32px;
          height: 32px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .name-content {
          margin-left: 10px;
          font-size: 14px;
          color: #333333;
        }
      }
      .role {
        margin-right: 20px;
        font-size: 12px;
        color: #999999;
      }
    }
    li:hover {
      background: var(--el-color-primary-light-9);

      // border-left: 2px solid var(--el-color-primary);
    }
  }
}
</style>
